<template>
  <div :class="['message', {'message__show': open}]">
      <i class="iconfont icon-shibai"  :class="['iconfont', iconClass]" style="margin-right: 6px"></i>{{value}}
  </div>
</template>

<script>
export default {
    props: {
        value: [String],
        status: {
            type: String,
            default: ''
        }
    },

    data() {
        return {
            open: false,
        }
    },

    computed: {
        iconClass() {
            return this.status == 'success' ? 'icon-success' : 'icon-shibai'
        }
    },

    mounted() {
        setTimeout(() => {
            this.open = true
        }, 100);

        setTimeout(() => {
            this.open = false
        }, 1500);

        setTimeout(() => {
            this.$emit('close')
        }, 4000);
    }
};

</script>
<style lang='stylus' scoped>
.message
    transition all .2s
    position fixed 
    background #fff
    left 50%
    top -40px
    opacity 1
    transform translateX(-50%)
    padding 0 15px
    border-radius 6px
    box-shadow 0 2px 7px rgba(0,0,0,.15)
    height 35px
    line-height 35px
    font-size 14px
    .icon-shibai
        color #f00
    .icon-success
        color #1afa29
    &__show
        opacity 1
        top 30px
</style>